<template>
  <div class="sys-setting card-box publicdetails">
    <div class="sys-setting-title">
      <div class="sys-setting-title-text">系统设置</div>
      <el-button @click="timeSyncfun" type="primary">同步时间</el-button>
      <el-button @click="restartfun" type="primary">重启设备</el-button>
      <el-button @click="funShowDia" type="primary">
        <el-icon :size="size" :color="color"> <Edit /> </el-icon>编辑</el-button >
    </div>
    <div class="publicdetails-module">
      <div
        class="publicdetails-list"
        style="display: flex; margin-bottom: 18px"
      >
        <div class="public-text-list" style="width: 50%">
          <div class="public-text-key">服务器地址</div>
          <div class="public-text-value public-left">
            {{ setInfo.host }}
          </div>
        </div>
        <div class="public-text-list" style="width: 50%">
          <div class="public-text-key">端口地址</div>
          <div class="public-text-value public-left">
            {{ setInfo.port }}
          </div>
        </div>
      </div>
      <div class="publicdetails-list" style="display: flex; margin-bottom: 18px">
        <div class="public-text-list" style="width: 50%">
          <div class="public-text-key">采集间隔</div>
          <div class="public-text-value public-left">{{ setInfo.timeSpan }}min</div>
        </div>
        <div class="public-text-list" style="width: 50%">
          <div class="public-text-key">支持协议</div>
          <div class="public-text-value public-left"> {{ setInfo.support }}</div>
        </div>
      </div>
      <div class="publicdetails-list" style="display: flex; margin-bottom: 18px">
        <div class="public-text-list" style="width: 50%">
          <div class="public-text-key">usernmae</div>
          <div class="public-text-value public-left">{{ setInfo.username }}</div>
        </div>
        <div class="public-text-list" style="width: 50%">
          <div class="public-text-key">password</div>
          <div class="public-text-value public-left"> {{ setInfo.password }}</div>
        </div>
      </div>
       <div class="publicdetails-list" style="display: flex; margin-bottom: 18px" >
        <div class="public-text-list" style="width: 50%">
          <div class="public-text-key">运行模式</div>
          <div class="public-text-value public-left" v-if="setInfo.runMode==1">联网运行</div>
          <div class="public-text-value public-left" v-if="setInfo.runMode==0">本地运行</div>
        </div>
        <div class="public-text-list" style="width: 50%">
          <div class="public-text-key">读取模式</div>
          <div class="public-text-value public-left" v-if="setInfo.readMode==1">持续读取</div>
          <div class="public-text-value public-left" v-if="setInfo.readMode==0">间隔读取</div>
        </div>
      </div>
      <div class="publicdetails-list" style="display: flex; margin-bottom: 18px" >
        <div class="public-text-list" style="width: 50%">
          <div class="public-text-key">存储到SD卡</div>
          <div class="public-text-value public-left" v-if="setInfo.sdsaveflag==1">开启</div>
          <div class="public-text-value public-left" v-if="setInfo.sdsaveflag==0">关闭</div>
        </div>
      </div>
    </div>

    <div class="sys-setting-title"><div class="sys-setting-title-text">设备信息</div></div>
    <div class="publicdetails-module">

      <div class="publicdetails-list" style="display: flex; margin-bottom: 18px" >
        <div class="public-text-list" style="width: 50%">
          <div class="public-text-key">SN</div>
          <div class="public-text-value public-left"> {{ setInfo.snNumber }}</div>
        </div>
        <div class="public-text-list" style="width: 50%">
          <div class="public-text-key">IMEI</div>
          <div class="public-text-value public-left"> {{ setInfo.IMEI }}</div>
        </div>
      </div>
      <div class="publicdetails-list" style="display: flex; margin-bottom: 18px" >
        <div class="public-text-list" style="width: 50%">
          <div class="public-text-key">外网连接状态</div>
          <div class=" public-left txt-normal" v-if="devInfo.network_connect_flag==1">已连接</div>
          <div class=" public-left txt-alarm" v-if="devInfo.network_connect_flag==0">未连接</div>
        </div>
        <div class="public-text-list" style="width: 50%">
          <div class="public-text-key">服务器连接</div>
          <div class="public-left  txt-normal" v-if="devInfo.service_connect_flag==1">已连接</div>
          <div class="public-left txt-alarm" v-if="devInfo.service_connect_flag==0">未连接</div>
        </div>
      </div>
      <div class="publicdetails-list" style="display: flex; margin-bottom: 18px" >
        <div class="public-text-list" style="width: 50%">
          <div class="public-text-key">SD卡状态</div>
          <div class=" public-left txt-normal" v-if="devInfo.sd_card_flag==1">正常</div>
          <div class=" public-left txt-alarm" v-if="devInfo.sd_card_flag==0">异常</div>
        </div>
        <div class="public-text-list" style="width: 50%">
          <div class="public-text-key">设备时间</div>
          <div class="public-left  public-text-value" >{{devInfo.timesTampD}}</div>
        </div>
      </div>
      <div class="publicdetails-list" style="display: flex; margin-bottom: 18px" >
        <div class="public-text-list" style="width: 50%">
          <div class="public-text-key">外网连接</div>
          <div class="public-text-value public-left" v-if="setInfo.networkConnect==1">有线网络</div>
          <div class="public-text-value public-left" v-if="setInfo.networkConnect==0">4G网络</div>
        </div>
      </div>
    </div>
  </div>
  <public-dialog v-model="showDia" title="编辑" @confirmDialog="doSubmit">
    <el-form
      ref="diaFormRef"
      :model="diaForm"
      :rules="diaRules"
      label-width="auto"
      label-position="top"
      class="csin-form"
    >
      <el-form-item label="服务器地址：" prop="host">
        <el-input
          v-model="diaForm.host"
          clearable
          maxlength="100"
          style="width: 100%"
          placeholder="请输入"
        />
      </el-form-item>
      <el-form-item label="端口地址：" prop="port">
        <el-input
          v-model="diaForm.port"
          clearable
          maxlength="40"
          style="width: 100%"
          placeholder="请输入"
        />
      </el-form-item>
      <el-form-item label="username：" prop="username">
        <el-input
          v-model="diaForm.username"
          clearable
          maxlength="40"
          style="width: 100%"
          placeholder="请输入"
        />
      </el-form-item>
      <el-form-item label="password：" prop="password">
        <el-input
          v-model="diaForm.password"
          clearable
          maxlength="40"
          style="width: 100%"
          placeholder="请输入"
        />
      </el-form-item>
      <el-form-item label="采集间隔：" prop="timeSpan">
        <el-input type="number"
          v-model="diaForm.timeSpan"
          clearable
          maxlength="30"
          style="width: 100%"
          placeholder="请输入"
        >
          <template #suffix> 分钟 </template>
        </el-input>
      </el-form-item>
      <el-form-item label="支持协议：" prop="support">
        <el-select
          v-model="diaForm.support"
          style="width: 100%"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        /></el-select>
      </el-form-item>
      <el-form-item label="存储到SD卡：" prop="sdsaveflag">
        <el-select
          v-model="diaForm.sdsaveflag"
          style="width: 100%"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options_sd"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        /></el-select>
      </el-form-item>
      <el-form-item label="运行模式：" prop="runMode">
        <el-select
          v-model="diaForm.runMode"
          style="width: 100%"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options_runMode"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        /></el-select>
      </el-form-item>
       <el-form-item label="读取模式：" prop="readMode">
        <el-select
          v-model="diaForm.readMode"
          style="width: 100%"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options_readMode"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        /></el-select>
      </el-form-item>
    </el-form>
  </public-dialog>
</template>
<script setup>
import { ref, getCurrentInstance, onMounted } from "vue";
import moment from 'moment';

let { proxy } = getCurrentInstance();
const showDia = ref(false);
const diaFormRef = ref(null);
const diaForm = ref({});
const setInfo = ref({});
const devInfo = ref({});
const options = ref([
  { value: "MQTT", label: "MQTT" },
  { value: "TCP/IP", label: "TCP/IP" },
  { value: "Modbus", label: "Modbus" },
]);
const options_sd = ref([
  { value: 1, label: "开启" },
  { value: 0, label: "关闭" },
]);
const options_runMode = ref([
  { value: 1, label: "联网运行" },
  { value: 0, label: "本地运行" },
]);
const options_readMode = ref([
  { value: 1, label: "持续读取" },
  { value: 0, label: "间隔读取" },
]);
const diaRules = ref({
  host: [{ required: true, message: "请输入服务器地址", trigger: "blur" }],
  port: [{ required: true, message: "请输入端口号", trigger: "blur" }],
  timeSpan: [
    { required: true, message: "请输入数据间隔", trigger: "blur" },
  ],
  support: [{ required: true, message: "请选择协议", trigger: "blur" }],
});

const funShowDia = () => {
  diaForm.value = { ...setInfo.value };
  showDia.value = true;
};
const doSubmit = (type) => {
  if (type === "cancel") {
    diaForm.value = {};
    diaFormRef.value.resetFields();
    showDia.value = false;
    return;
  }
  diaFormRef.value.validate((valid) => {
    if (valid) {
      diaForm.value.timeSpan = Number(diaForm.value.timeSpan);
      diaForm.value.sdsaveflag = Number(diaForm.value.sdsaveflag);
      diaForm.value.runMode = Number(diaForm.value.runMode);
      diaForm.value.readMode = Number(diaForm.value.readMode);
      proxy
        ._http({
          url: "/api/systemConfig/update",
          type: "post",
          isBody: true,
          isLoading: true,
          data: {
            ...diaForm.value,
          },
        })
        .then((res) => {
          ElMessage.success("修改成功");
          diaForm.value = {};
          diaFormRef.value.resetFields();
          showDia.value = false;
          getInfo()
        })
        .catch((err) => {});
    } else {
      console.log("error submit!!");
      return false;
    }
  });
};

const restartfun = () => {
   proxy._http({
      url: "/api/systemConfig/restartApp",
      type: "post",
      isBody: true,
      data: {date:1},
    })
    .then((res) => {
    })
    .catch((err) => {
      ElMessage.success("正在重启应用");
    });
}
const timeSyncfun = () => {
   proxy._http({
      url: "/api/systemConfig/timeSync",
      type: "post",
      isBody: true,
      data: {date:moment(new Date()).format('yyyy-MM-DD HH:mm:ss')},
    })
    .then((res) => {
      console.log("同步时间", res);
      if(res.data == "ok")
        ElMessage.success("设置成功");
      else
        ElMessage.error(res.data);
    })
    .catch((err) => {});
}
const getInfo = () => {
  proxy
    ._http({
      url: "/api/systemConfig/get",
      type: "post",
      isBody: true,
      isLoading: true,
      data: {},
    })
    .then((res) => {
      console.log(258, res);

      setInfo.value = res;
    })
    .catch((err) => {});
};
const getdevInfo = () => {
  proxy
    ._http({
      url: "/api/systemStatus/get",
      type: "post",
      isBody: true,
      isLoading: true,
      data: {},
    })
    .then((res) => {
      

      devInfo.value = res;
      devInfo.value.timesTampD = moment(devInfo.value.timesTamp*1000).format("YYYY-MM-DD HH:mm:ss");
      console.log(257, devInfo);
    })
    .catch((err) => {});
};
onMounted(() => {
  // /api/systemConfig/get
  getInfo();
  getdevInfo();
});
</script>
<style lang="scss">
.sys-setting {
  box-sizing: border-box;

  &-title {
    box-sizing: border-box;
    padding-bottom: 28px;
    margin-bottom: 18px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #e7e7e7;
    &-text {
      font-size: 20px;
      color: #000000f0;
      font-weight: bold;
    }
  }
}

.txt-normal {
    color: #07af74;
    border: 1px solid #07af74;
    background:#07af741A;
    border-radius: 1px;
    padding: 0 10px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 2px;
}
.txt-alarm {
    color: #de1b1b;
    border: 1px solid #de1b1b;
    background:#de1b1b1A;
    border-radius: 1px;
    padding: 0 10px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 2px;
}
</style>
